<template>
  <div>
    
      <button @click="addNum(5)">+</button>
        <button @click="reduceNum(5)">-</button>
        <button @click="addNumAsync(6)">异步的+</button>
      {{ $store.state.num }}
      {{ $store.getters.numDouble }}
      {{ numDouble }}
      {{ num }}
  
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  mounted() {
   console.log( mapState(['num', 'num2']))
   console.log(mapMutations(['addNum', 'reduceNum']))
   /* 
    mapState(['num', 'num2']
   返回
    {
      num () {
        return store.state.num
      },
      num2 () {
        return store.state.num2
      }
    }

mapMutations(['addNum', 'reduceNum']) 
  {
    addNum (n) {
      store.commit('addNum' ,n)
    },
    reduceNum (n) {
      store.commit('reduceNum', n)
    }
  }
   */
  },
 /*  computed: {
    num () {
      return this.$store.state.num
    }
  } */
 /*  methods: {
    
    addNum (n) {
      this.$store.commit('addNum', n)
    }
  }, */
  // methods: mapMutations(['addNum', 'reduceNum']),
  methods: {
    ...mapMutations(['addNum', 'reduceNum']),
    ...mapActions(['addNumAsync'])
  },
  computed: {
    ...mapState(['num']),
    ...mapGetters(['numDouble'])
  }
}
</script>

<style lang="scss" scoped>
h1{
  color: red;
}
</style>
